<template>
    <div>
        <div v-if="welcome" id="start" class="guide">
            <div class="pop-item">
                <h2 style="font-weight: normal;text-align: center;margin-bottom: 0.3rem">WebMOOC餐厅开业啦!</h2>
                <p>WebMOOC餐厅开业即将开业，请认真经营你的餐厅吧，经营餐厅需要做好下面几件事情!加油！</p>
                <p class="task">
                    <span>招聘厨师</span>
                    <span>迎接客人</span>
                    <span>烹饪美食</span>
                </p>
                <div class="button" @click="start">开始经营吧</div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
    data() {
        return {
            welcome: true
        }
    },
    methods:{
        ...mapMutations([
            'initState'
        ]),
        start(){
            this.welcome = false
            this.initState()
        }
    }
}
</script>

<style scoped>

    .task {
        display: flex;
        justify-content: space-between;
        align-content: center;
        line-height: 2.5rem;
    }

</style>